body{
  margin: 0;
}
.container{
  max-width: 1000px;
  border: 1px solid transparent;
  /* margin: 0 100px 0 100px; */
  margin: auto;
}
header{
  /* background-color: #eee; */
  background: linear-gradient(#ccc, #eee);
  border-radius: 20px 20px 0 0;
  padding: 20px;
  text-align: center;
}
header h2,h3,p{
  margin: 0;
}
header h3{
  position: relative;
  left: 50px;
  margin: 5px 0;
}
header > p{
  text-indent: 32px;
  text-align: start;
}
nav{
  background: linear-gradient(grey, SkyBlue);
  height: 35px;
  margin: 10px 0
}
nav  ul{
  list-style: none;
  line-height: 35px;
}
nav > ul > li{
  display: inline-block;
  margin: 0 20px;
}
nav > ul > li > a,a:link,a:visited{
  font-weight: bold;
  color: white;
  text-decoration: none;
  text-shadow: 1px 1px grey;
}
nav > ul > li > a:hover{
  font-size: 20px;
}
nav > ul  ul{
  display: none;
  background: linear-gradient(grey, SkyBlue);
  padding: 10px 10px;
  position: absolute;
}
nav > ul > li:nth-last-child(2):hover > ul{
  display: block;
}
nav > ul > li > ul > li:last-of-type:hover > ul{
    display: block;
    position: absolute;
    left: 70px;
    top: 130px;
}

section{
  border: 1px solid #ddd;
  display: flex;
  flex-wrap: wrap;
}
section > h1{
  width: 100%;
  padding-left: 10px;
}
.product{
  width: 70px;
  border: 1px solid #ddd;
  overflow: hidden;
  text-align: center;
  margin: 5px;
  padding: 3px;
  min-height: 100px;
}
.product > img{
width: 70px;
  height: 80px;
}
.product h5,p{
  margin: 0;
}
.product > p{
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  font-size: 0.875em;
}
.product > p:hover{
  white-space: nowrap;
  width: 1000px;
  position: relative;
  animation: tran linear 15s infinite;
}
/* 产品描述 动画 */
@keyframes tran {
  0%{
    left: 0;
  }

  100%{
    left: -1000px;
  }
}


@media(min-width:400px) {
  nav > h3{
    display: none;
  }
}
@media(max-width:399px) {
  header{
    display: none;
  }
  section{
    text-align: center;
    justify-content:center;
  }
  nav > h3{
    display: block;
    color: white;
    line-height: 35px;
    margin-left: 20px;
    width: 80px;
  }
  nav > ul{
      display: none;
  }
  .adapPhone{
    position: absolute;
    display: block;
    background: linear-gradient(grey, SkyBlue);
    padding: 0 10px;
    left: 20px;
    margin: 0;
  }
  .adapPhone > li{
    display: block;
    margin: 0 ;
  }
}

footer{
  height: 100px;
}

div.ad{
  position:fixed;
  width: 150px;
  height: 150px;
  right: 1px;
  bottom: 1px;
  background: linear-gradient(to right, #0066FF, #666600);
}
div.ad > span{
  display: block;
  padding: 10px 10px ;
  line-height: 30px;

}
div.ad > p{
  position: relative;
  left: 5px;
  top: 2px;
}
div.trans{
width: 10px;
transition: 0.7s;
}
